import React, { useEffect, useState } from 'react';
import { Toast, Card, Button, Picker, ShareSheet } from 'react-vant';
import { StarO, ShareO } from '@react-vant/icons';
import { NavBar } from 'antd-mobile';
import { history } from 'umi';
import CalendarModule from '@/pages/CalendarModule';
import './index.less';

// 日历选择
const columns = [
  ['2023', '2024', '2025'],
  ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
];

const todayDate = new Date(); // 今日日期，实际项目中推荐从接口拿服务器日期用
const todayZeroDate = new Date(
  todayDate.getFullYear(),
  todayDate.getMonth(),
  todayDate.getDate(),
); // 今日零点的日期，用于后续转换时间戳后日期大小的比较

// 分享面板的数据
const options = [
  [
    { name: '微信', icon: 'wechat' },
    { name: '朋友圈', icon: 'wechat-moments' },
    { name: '微博', icon: 'weibo' },
    { name: 'QQ', icon: 'qq' },
  ],
  [
    { name: '复制链接', icon: 'link' },
    { name: '分享海报', icon: 'poster' },
    { name: '二维码', icon: 'qrcode' },
    { name: '小程序码', icon: 'weapp-qrcode' },
  ],
];

// 新婚人数
let peopleNum = [1447, 432, 6433, 666, 9999, 888, 3453, 5933, 3563];
// 热度
let hotNum = [3, 2, 5, 2, 5, 2, 3, 4, 3];
// 随机黄历
let almanac = [
  { name: '宜', color: '#46d788' },
  { name: '平', color: '#ffaf24' },
  { name: '忌', color: '#333333' },
  { name: '宜', color: '#46d788' },
  { name: '平', color: '#ffaf24' },
  { name: '忌', color: '#333333' },
  { name: '宜', color: '#46d788' },
  { name: '平', color: '#ffaf24' },
  { name: '忌', color: '#333333' },
];
// 黄历数据
let pointList = ['嫁娶', '订婚', '彩礼', '纳婿'];

export default () => {
  // 控制分享面板打开关闭
  const [visible, setVisible] = useState(false);
  const [currentDateInfo, setCurrentDateInfo] = useState({});
  const [selectDate, setSelectDate] = useState(['2023', '3']);
  const [changeYearNum, setChangeYearNum] = useState<number>(
    todayZeroDate.getFullYear(),
  );
  const [changeMonthNum, setChangeMonthNum] = useState<number>(
    todayZeroDate.getMonth() + 1,
  );

  const getYearAndMouth = (DayInfo: object) => {
    setCurrentDateInfo({ ...DayInfo });
  };
  let sindex: number = 0;

  useEffect(() => {
    sindex = Math.floor(Math.random() * peopleNum.length);
  }, [currentDateInfo]);

  let { id, IMonthCn, IDayCn, ncWeek } = currentDateInfo as any;

  return (
    <div className="good_day_box">
      <NavBar
        className="good_day_nav"
        title=" 结婚吉日"
        onBack={() => history.goBack()}
      >
        结婚吉日
      </NavBar>
      <div className="user_header">
        <span
          className="user_header_span1"
          onClick={() => history.push('/home')}
        >
          <svg
            t="1677742879144"
            className="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="7892"
            width="20"
            height="20"
          >
            <path
              d="M796 924V512c0-19.882 16.118-36 36-36h41.088L512 114.912 150.912 476H192c19.882 0 36 16.118 36 36v412h158v-86c0-58.542 47.458-106 106-106h40c58.542 0 106 47.458 106 106v86h158z m72-376v412c0 19.882-16.118 36-36 36H602c-19.882 0-36-16.118-36-36V838c0-18.778-15.222-34-34-34h-40c-18.778 0-34 15.222-34 34v122c0 19.882-16.118 36-36 36H192c-19.882 0-36-16.118-36-36V548H64c-32.073 0-48.135-38.777-25.456-61.456l448-448c14.059-14.059 36.853-14.059 50.912 0l448 448C1008.135 509.223 992.073 548 960 548h-92z"
              fill="#2c2c2c"
              p-id="7893"
            ></path>
          </svg>
        </span>
        <span style={{ fontSize: '0.34rem' }}>结婚吉日</span>
      </div>
      <div className="good_tabs">
        <div className="change_page" onClick={() => history.push('/ranking')}>
          <span className="change_ico">
            <svg
              t="1677746148244"
              className="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="1457"
              width="15"
              height="15"
            >
              <path
                d="M900.4 424.87c19.47 0 37.03-11.73 44.49-29.73 7.46-17.98 3.33-38.7-10.43-52.48L713.97 122.19c-7.3-7.3-19.12-7.3-26.42 0l-41.69 41.69c-7.3 7.3-7.3 19.13 0 26.42l138.28 138.27H86.32c-10.19 0-18.46 8.26-18.46 18.46v59.39c0 10.19 8.26 18.46 18.46 18.46H900.4zM937.65 598.72H123.8c-19.47 0-37.03 11.73-44.49 29.73-7.46 17.98-3.33 38.7 10.43 52.48l220.49 220.48c7.3 7.3 19.12 7.3 26.42 0l41.69-41.69c7.3-7.3 7.3-19.13 0-26.42L240.06 695.02h697.59c10.32 0 18.68-8.37 18.68-18.68v-58.93c0-10.32-8.36-18.69-18.68-18.69z"
                p-id="1458"
                fill="#ffffff"
              ></path>
            </svg>
          </span>
          <span>排行榜</span>
        </div>
        <div className="select_date">
          <Picker
            popup={{
              round: true,
            }}
            className="good_day_popup"
            value={selectDate}
            title="选择日期"
            columns={columns}
            onConfirm={(info: any) => {
              if (info.indexOf(undefined) !== -1)
                return Toast({
                  message: '未更改',
                  position: 'top',
                });
              setChangeYearNum(info[0]);
              setChangeMonthNum(info[1]);
              setSelectDate([...info]);
            }}
          >
            {(val, _, actions) => {
              return (
                <div onClick={() => actions.open()}>
                  <span className="date">
                    {changeYearNum}年{changeMonthNum}月
                  </span>
                  <span>
                    <svg
                      t="1677746067530"
                      className="icon"
                      viewBox="0 0 1026 1024"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      p-id="9119"
                      width="16"
                      height="16"
                    >
                      <path
                        d="M876.086 337.213c-10.297-10.297-26.252-10.912-36.037-1.691l-310.009 309.983c-12.629 13.299-15.926 13.244-29.173 0l-309.983-309.983c-9.786-9.248-25.741-8.606-36.037 1.691-10.486 10.486-11.071 26.838-1.342 36.597l344.33 344.333c4.238 4.238 9.759 6.14 15.47 6.485h4.317c5.71-0.375 11.235-2.276 15.47-6.485l344.33-344.333c9.714-9.759 9.125-26.137-1.33-36.597z"
                        fill="#ffffff"
                        p-id="9120"
                      ></path>
                    </svg>
                  </span>
                </div>
              );
            }}
          </Picker>
        </div>
        <div className="my_collect" onClick={() => history.push('/shoucang')}>
          <span>我的收藏</span>
        </div>
      </div>

      <div className="good_day_body">
        <CalendarModule
          getYearAndMouth={getYearAndMouth}
          changeYearNum={changeYearNum}
          changeMonthNum={changeMonthNum}
        />

        <Card round className="date_info_card">
          <Card.Header className="date_info_card_head">
            全国共
            <b style={{ color: 'red' }}>{peopleNum[sindex]}</b>
            对新人结婚，热度
            {[...new Array(hotNum[sindex]).keys()].map(() => '🔥')}
          </Card.Header>
          <Card.Body>
            <div className="current_pointOut">
              <div className="pointOutList">
                {pointList.map((item, index) => {
                  let ind = Math.floor(Math.random() * almanac.length);
                  return (
                    <div className="pointOutItem" key={index}>
                      <span
                        className="icon"
                        style={{ backgroundColor: almanac[ind].color }}
                      >
                        {almanac[ind].name}
                      </span>
                      <span>{item}</span>
                    </div>
                  );
                })}
              </div>
            </div>
            <div className="current_date">
              {currentDateInfo.hasOwnProperty('id')
                ? id.split('-')[0] +
                  '年' +
                  id.split('-')[1] +
                  '月' +
                  id.split('-')[2] +
                  '日' +
                  '    ' +
                  IMonthCn +
                  IDayCn +
                  '    ' +
                  '周' +
                  ncWeek.split('')[ncWeek.split('').length - 1]
                : '...'}
            </div>
            <hr />
            <div className="opt">
              <div onClick={() => Toast.info('收藏成功')}>
                <StarO color="#f83e4e" />
                &nbsp;收藏待选
              </div>
              <div onClick={() => setVisible(true)}>
                <ShareO color="#f83e4e" />
                &nbsp;分享吉日
              </div>
            </div>
            <ShareSheet
              visible={visible}
              options={options}
              title="立即分享给好友"
              onCancel={() => setVisible(false)}
              onSelect={(option, index) => {
                console.log('option', option);
                console.log('index', index);
                setVisible(false);
              }}
            />
          </Card.Body>
          <Card.Footer className="date_info_card_footer">
            <Button
              type="primary"
              className="show-more"
              round
              block
              size="normal"
            >
              抢定热门档期
            </Button>
          </Card.Footer>
        </Card>
        <p
          style={{
            textAlign: 'center',
            color: '#99b1d2',
            fontSize: '0.28rem',
            paddingBottom: '0.2rem',
          }}
        >
          本数据由婚礼大数据提供
        </p>
      </div>
    </div>
  );
};
